<template>
  <div class="app-container" style="padding: 30px">
    <el-row type="flex">
      <el-col  :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-form :model="role" label-width="80px" label-position="left">
          <el-form-item label="角色名称" >
            <el-input v-model="role.roleName" placeholder="角色名称" />
          </el-form-item>
          <el-form-item label="角色标识" >
            <el-input v-model="role.roleKey" placeholder="角色标识" />
          </el-form-item>
          <el-form-item label="角色说明">
            <el-input
              v-model="role.description"
              :autosize="{ minRows: 2, maxRows: 4}"
              type="textarea"
              placeholder="角色说明"
            />
          </el-form-item>
          <!-- <el-form-item label="Menus">
             <el-tree
               ref="tree"
               :check-strictly="checkStrictly"
               :data="routesData"
               :props="defaultProps"
               show-checkbox
               node-key="path"
               class="permission-tree"
             />
           </el-form-item>-->
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const defaultRole = {
  roleId: '',
  roleKey: '1',
  roleName: '',
  description: ''
}
export default {
  data() {
    return {
      role: { ...defaultRole }
    }
  }
}
</script>

<style scoped>

</style>
